<script setup>
import {FolderAdd, Delete, Edit} from "@element-plus/icons-vue"
import {onMounted, reactive, ref} from 'vue'
import {deleteOjQuestionDetailService, getOjQuestionList} from "@/api/question.js";
import {ElMessage, ElMessageBox} from "element-plus";
import QuestionDrawer from "@/components/Question/QuestionDrawer.vue";
import Selector from "@/components/Question/QuestionSelector.vue"

const questionList = ref([])
const totalSize = ref(0)

const pageForm = reactive({
  current: 1,
  size: 10,
  title: "",
  difficulty: ""
})

async function handlePageChange() {
  const questionResultPage = await getOjQuestionList(pageForm)
  questionList.value = questionResultPage.data.records
  totalSize.value = questionResultPage.data.total
}

onMounted(async () => {
  await handlePageChange()
})

// 会传递一个size参数过来
// pageForm.current = 1 -》表示从第一页开始进行查询
function handleSizeChange() {
  pageForm.current = 1
  handlePageChange();
}

// 这里会传递这个page页码过来
function handleCurrentChange() {
  handlePageChange()
}

function handleSearchChange() {
  if (pageForm.title.toString().trim() === "") {
    ElMessage({
      message: '请输入要搜索题⽬标题，再进行查询！',
      type: 'warning',
    })
    return;
  }
  pageForm.current = 1
  handlePageChange()
}

function handleReSetChange() {
  pageForm.current = 1
  pageForm.size = 10
  pageForm.title = ""
  pageForm.difficulty = ""
  handlePageChange()
}

// 通过ref获取子组件的响应实例
const questionDrawerRef = ref()

// 添加
function AddOjQuestion() {
  if (questionDrawerRef.value) {
    questionDrawerRef.value.OnChangeVisible()
  }
}

// 添加OJ题目完成子组件回调父组件，重新申请数据
function OnAddQuestionChange() {
  pageForm.current = 1
  handlePageChange();
}

// 编辑OJ题目完成子组件回调父组件，重新申请数据
function OnUpdateQuestionChange() {
  handlePageChange();
}

// 将父组件获取到的ID传递给子组件
function onEditChange(id) {
  if (questionDrawerRef.value) {
    questionDrawerRef.value.OnChangeVisible(id)
  }
}

// 删除OJ题目
async function onDeleteChange(id) {
  try {
    await ElMessageBox.confirm(
        '确定要删除该道题目吗?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
    // 确认删除后调用服务
    await deleteOjQuestionDetailService(id)

    // 提示删除成功
    ElMessage({
      type: 'success',
      message: '成功删除该道OJ题目',
    })

    // 重新进行申请数据
    pageForm.current = 1
    await handlePageChange();
  } catch (err) {
    // 根据错误类型判断是取消还是失败
    if (err === 'cancel') {
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
      })
    }
  }
}
</script>

<template>
  <el-form inline="true">
    <el-form-item>
      <selector @change="handlePageChange" v-model="pageForm.difficulty"
                placeholder="请选择题⽬难度" style="width: 200px;"></selector>
    </el-form-item>
    <el-form-item>
      <el-input placeholder="请您输⼊要搜索的题⽬标题" v-model="pageForm.title" @keydown.enter="handleSearchChange"/>
    </el-form-item>
    <el-form-item>
      <el-button plain @click="handleSearchChange">搜索</el-button>
      <el-button plain type="info" @click="handleReSetChange">重置</el-button>
      <el-button plain type="primary" :icon="FolderAdd" @click="AddOjQuestion">添加题⽬</el-button>
    </el-form-item>
  </el-form>
  <el-table height="526px" :data="questionList">
    <el-table-column prop="id" width="180px" label="题⽬id"/>
    <el-table-column prop="title" label="题⽬标题"/>
    <el-table-column prop="difficulty" label="题⽬难度" width="110px">
      <template #default="{ row }">
        <div v-if="row.difficulty === 0" style="color:#3EC8FF;">简单</div>
        <div v-if="row.difficulty === 1" style="color:#FE7909;">中等</div>
        <div v-if="row.difficulty === 2" style="color:#FD4C40;">困难</div>
      </template>
    </el-table-column>
    <el-table-column prop="adminUser" label="创建⼈" width="140px"/>
    <el-table-column prop="createTime" label="创建时间" width="180px"/>
    <el-table-column prop="updateTime" label="修改时间" width="180px"/>
    <el-table-column label="操作" width="100px" fixed="right">
      <!-- 通过插槽获取题目ID-->
      <template #default="{ row }">
        <el-button type="text" :icon="Edit" title="编辑题目" @click="onEditChange(row.id)"></el-button>
        <el-button type="text" :icon="Delete" title="删除题目" @click="onDeleteChange(row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination size="small" background
                 :total="totalSize"
                 :page-sizes="[1, 5, 10, 15, 20]"
                 layout="total, sizes, prev, pager, next, jumper"
                 @size-change="handleSizeChange"
                 v-model:current-page="pageForm.current"
                 v-model:page-size="pageForm.size"
                 @current-change="handleCurrentChange"/>
  <QuestionDrawer ref="questionDrawerRef" @success="OnAddQuestionChange"
                  @update="OnUpdateQuestionChange"></QuestionDrawer>
</template>